<template>
  <div class="fillOrder">
    <title-header :title="title"></title-header>
    <group>
      <div class=" address">
          <div class="address-icon">
            <a class="icon iconfont icon-weizhi"></a>
          </div>
          <p>
            <span class="name">{{orderDetail.receptionName}}</span>
            <span class="tel">{{orderDetail.receptionPhone}}</span>
            <a class="default" v-if="orderDetail.isDefault == true">默认</a>
          </p>
          <p class="addressP">{{orderDetail.receptionArea}} {{orderDetail.receptionAddress}}</p>
      </div>
      <div class="goods clearfix ">
        <div class="left">
          <img :src="orderDetail.image" align="absmiddle" />
        </div>
        <div class="right relative">
          <p class="firstP">{{orderDetail.name}}</p>
          <p>
            <span class=' showColor'>{{orderDetail.specification}}</span>
          </p>
          <p class="lastP">
            <span class="money">￥{{orderDetail.price}}</span>
            <span class="positionRight opacity">x{{orderDetail.num}}</span>
          </p>
        </div>

      </div>
      <div class="vux-cell-box content ">
        <p>订单编号 : {{orderDetail.sn}}</p>
        <p>创建时间 : {{orderDetail.createDate}}</p>
      </div>
      <div class="result">
        <p>
          <span class="bottomleft">商品金额</span>
          <span class="bottomRight">￥{{orderDetail.price*orderDetail.num}}</span>
        </p>
        <p>
          <span class="bottomleft">运费
            <span class="opacity">(0.87kg)</span>
          </span>
          <span class="bottomRight">￥{{orderDetail.freight}}</span>
        </p>
      </div>
      <div class="bottom relative">
        <a class="total">实付款:
          <span class="money smallFont">￥{{orderDetail.price*orderDetail.num + orderDetail.freight}}</span>
        </a>
        <router-link to="/applyRefund" class="settlement">申请退款</router-link>
      </div>
    </group>
  </div>
</template>

<script>
import { Group, Cell, CellBox } from 'vux'
import TitleHeader from '@/components/titleHeader.vue'
import Data from '@/server/server.js'

export default {
  components: {
    Group,
    Cell,
    CellBox,
    TitleHeader
  },
  data () {
    return {
      title: '订单详情',
      orderDetail: {}
    }
  },
  mounted () {
    Data.orderList().then(data => {
        this.orderDetail = data[0]
      })
  }
}
</script>
<style scoped>
.title {
  width: 100%;
  height: 3rem;
  background: white;
  font-size: 1.2rem;
  text-align: center;
  position: relative;
  line-height: 3rem;
}
.icon {
  position: absolute;
  left: 3%;
  top: 12%;
  transform: translate(0, -50%);
}
.content {
  padding: 0.6rem;
  font-size: 0.8rem;
  opacity: 0.6;
  border-bottom: 5px solid #f0f0f0;
  line-height: 1.5rem;
}
.relative {
  position: relative;
}
.goods {
  width: 100%;
  height: 4rem;
  padding: 1rem 0;
  border-top: 2px solid #f0f0f0;
  border-bottom: 10px solid #f0f0f0;
}
.left {
  width: 25%;
  float: left;
}
.left img {
  width: 75%;
  margin-left: 10%;
}

.right {
  width: 70%;
  float: left;
  padding-left: 5%;
}
.right .firstP {
  font-size: 0.9rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-right: 5%;
}
.showColor {
  font-size: 0.8rem;
}
.money {
  color: red;
  font-size: 1.1rem;
}
.opacity {
  opacity: 0.4;
}
.positionRight {
  position: absolute;
  right: 5%;
  font-size: 0.8rem;
}
.borderTB {
  border-top: 10px solid #f0f0f0;
  border-bottom: 10px solid #f0f0f0;
}
.result {
  padding: 15px 0;
  line-height: 1.5rem;
  font-size: 15px;
}
.bottomleft {
  margin-left: 15px;
}
.bottomleft .opacity {
  font-size: 0.8rem;
}
.bottomRight {
  position: absolute;
  right: 15px;
  color: red;
}

.bottom {
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  background: white;
  position: fixed;
  border-bottom: 0.3rem solid#F0F0F0;
  bottom: 0;
  padding-left: 3.5%;
  z-index: 100;
}
.settlement {
  color: white;
  font-size: 1.2rem;
  display: block;
  text-align: center;
  position: absolute;
  right: 3.5%;
  width: 30%;
  height: 3rem;
  background: orangered;
  top: 0;
}
.total {
  position: absolute;
  right: 35.5%;
}
.name {
  padding-left: 5.5%;
}
.tel {
  margin-left: 3%;
}
.default {
  padding: 1px 5px;
  font-size: 0.5rem;
  border: 1px solid red;
  color: red;
}
.address {
  padding: 1rem;
  font-size: 1rem;
}
.addressP {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
}
</style>